import { useContext,useEffect,useState } from 'react'
import {Route,Routes,BrowserRouter} from 'react-router-dom'

import MainWrapper from './layouts/MainWrapper'
import PrivateRoute from './layouts/PrivateRoute'

import Register from './views/auth/Register'
import Login from './views/auth/Login'
import Logout from './views/auth/Logout'
import ForgotPassword from './views/auth/ForgotPassword'
import CreateNewPassword from './views/auth/CreateNewPassword'
import Index from './views/base/Index'
import CourseDetail from './views/base/CourseDetail'
import Cart from './views/base/Cart'
import Checkout from './views/base/Checkout'
import { CartContext } from './views/plugin/Context'
import CartId from './views/plugin/Cartid'

import apiInstance from './utils/axios'

function App() {
  const [cartCount,setCartCount] = useState(0)

  useEffect(()=>{
    apiInstance.get(`course/cart-list/${CartId()}/`).then((res)=>{
      setCartCount(res.data?.length)
    })
  },[])

  return (
    <CartContext.Provider value={[cartCount,setCartCount]}>
      <BrowserRouter>
      <MainWrapper>
        <Routes>
          <Route path="/register/" element={<Register/>}/>
          <Route path="/login/" element={<Login/>}></Route>
          <Route path='/logout/' element={<Logout/>}></Route>
          <Route path='/forgot-password/' element={<ForgotPassword/>}></Route>
          <Route path='/create-password/' element={<CreateNewPassword></CreateNewPassword>}></Route>


          <Route path='/' element={<Index/>}></Route>
          <Route path='/course-detail/:slug/' element={<CourseDetail/>}></Route>
          <Route path='/cart/' element={<Cart/>}></Route>
          <Route path='/checkout/:order_oid/' element={<Checkout/>}></Route>
        </Routes>
      </MainWrapper>
      </BrowserRouter>
    </CartContext.Provider>
  )

  
}

export default App
